<template>
  <view class="dropdown">
    <button class="dropdown-button" @click="toggleDropdown">
      {{ selected || placeholder }} 
      <uv-icon name="arrow-right" size="18" color="#000"></uv-icon>
    </button>
    <view class="dropdown-list" v-if="isDropdownOpen">
      <view class="dropdown-item" v-for="cattle in cattleList" :key="cattle.id" @click="selectCattle(cattle)">
        {{ cattle.imei }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue';

const props = defineProps({
  cattleList: Array,
  placeholder: String 
});

const emit = defineEmits(['select']);

const selected = ref('');
const isDropdownOpen = ref(false);

const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value;
};

const selectCattle = (cattle) => {
  selected.value = cattle.imei;
  isDropdownOpen.value = false;
  emit('select', cattle.imei);
};
</script>

<style scoped>
.dropdown {
  position: relative;
  background-color: #fff;
  border: none;
}

.dropdown-button {
  font-size: 28rpx;
  display: flex;
  border: none;
  padding: 0;
  background-color: #fff;
}

.dropdown-list {
  position: absolute;
  z-index: 100;
  width: 100%;
  background-color: #fff;
  border: none;
}

.dropdown-item {
  padding: 20rpx;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
}

.dropdown-item:hover {
  background-color: #fff;
  border: none;
}
</style>